<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+ 2</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var gentry=null,hl=null,le=null;
var er=null,ep=null;
// H5 plus事件处理
function plusReady(){
	// 获取音频目录对象
	plus.io.resolveLocalFileSystemURL( "_doc/", function ( entry ) {
		entry.getDirectory( "audio", {create:true}, function ( dir ) {
			gentry = dir;
			updateHistory();
		}, function ( e ) {
			outSet( "Get directory \"audio\" failed: "+e.message );
		} );
	}, function ( e ) {
		outSet( "Resolve \"_doc/\" failed: "+e.message );
	} );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentLoaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	// 获取DOM元素对象
	hl = document.getElementById("history");
	le = document.getElementById("empty");
	er = document.getElementById("record");
	rt = document.getElementById("rtime");
	ep = document.getElementById("play");
	pt = document.getElementById("ptime");
	pp = document.getElementById("progress")
	ps = document.getElementById("schedule");
},false);
// 添加播放项
function createItem( entry ) {
	var li = document.createElement("li");
	li.className = "ditem";
	li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
	li.setAttribute( "onclick", "playAudio(this);" );
	hl.insertBefore( li, le.nextSibling );
	li.querySelector(".aname").innerText = entry.name;
	li.querySelector(".ainf").innerText = "...";
	li.entry = entry;
	updateInformation( li );
	// 设置空项不可见
	le.style.display = "none";
}
// 开始录音
var r=null,t=0,ri=null,rt=null;
function startRecord() {
	outSet( "开始录音：" );
	r = plus.audio.getRecorder();
	if ( r == null ) {
		outLine( "录音对象未获取" );
		return;
	}
	r.record( {filename:"_doc/audio/"}, function ( p ) {
		outLine( "录音完成："+p );
		plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
			createItem( entry );
		}, function ( e ) {
			outLine( "读取录音文件错误："+e.message );
		} );
	}, function ( e ) {
		outLine( "录音失败："+e.message );
	} );
	er.style.display = "block";
	t = 0;
	ri = setInterval( function () {
		t++;
		rt.innerText = timeToStr(t);
	}, 1000 );
}
// 停止录音
function stopRecord(){
	er.style.display = "none";
	rt.innerText = "00:00:00";
	clearInterval( ri );
	ri = null;
	r.stop();
	w = null;
	r = null;
	t = 0;
}
// 清除历史记录
function cleanHistory() {
	hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
	le = document.getElementById( "empty" );
	// 删除音频文件
	outSet( "清空录音历史记录：" );
	gentry.removeRecursively( function () {
		// Success
		outLine( "操作成功！" );
	}, function ( e ) {
		ouline( "操作失败："+e.message );
	});
}
// 获取录音历史列表
function updateHistory() {
	if ( !gentry ) {
		return;
	}
  	var reader = gentry.createReader();
  	reader.readEntries( function ( entries ) {
  		for ( var i in entries ) {
  			if ( entries[i].isFile ) {
  				createItem( entries[i] );
  			}
  		}
  	}, function ( e ) {
  		outLine( "读取录音列表失败："+e.message );
  	} );
}
// 获取录音文件信息
function updateInformation( li ) {
	if ( !li || !li.entry ) {
		return;
	}
	var entry = li.entry;
	entry.getMetadata( function ( metadata ) {
		li.querySelector( ".ainf" ).innerText = dateToStr( metadata.modificationTime );
	}, function ( e ) {
		outLine( "获取文件\""+entry.name+"\"信息失败："+e.message );
	} );
}
// 播放音频文件
function playAudio( li ) {
	if ( !li || !li.entry ) {
		ouSet( "无效的音频文件" );
		return;
	}
	outSet( "播放音频文件："+li.entry.name );
	startPlay( "_doc/audio/"+li.entry.name );
}
// 播放文件相关对象
var p=null,pt=null,pp=null,ps=null,pi=null;
// 开始播放
function startPlay( url ) {
	ep.style.display = "block";
	var L = pp.clientWidth;
	p = plus.audio.createPlayer( url );
	p.play( function () {
		outLine( "播放完成！" );
		// 播放完成
		pt.innerText = timeToStr(d)+"/"+timeToStr(d);
		ps.style.webkitTransition = "all 0.3s linear";
		ps.style.width = L+"px";
		stopPlay();
	}, function ( e ) {
		outLine( "播放音频文件\""+url+"\"失败："+e.message );
	} );
	// 获取总时长
	var d = p.getDuration();
	if ( !d ) {
		pt.innerText = "00:00:00/"+timeToStr(d);
	}
	pi = setInterval( function () {
		if ( !d ) { // 兼容无法及时获取总时长的情况
			d = p.getDuration();
		}
		var c = p.getPosition();
		if ( !c ) {  // 兼容无法及时获取当前播放位置的情况
			return;
		}
		pt.innerText = timeToStr(c)+"/"+timeToStr(d);
		var pct = Math.round(L*c/d);
		if ( pct < 8 ) {
			pct = 8;
		}
		ps.style.width = pct+"px";
	}, 1000 );
}
// 停止播放
function stopPlay() {
	clearInterval(pi);
	pi=null;
	setTimeout(resetPlay,500);
	// 操作播放对象
	if(p){
		p.stop();
		p=null;
	}
}
// 重置播放页面内容
function resetPlay() {
	ep.style.display = "none";
	ps.style.width = "8px";
	ps.style.webkitTransition = "all 1s linear";
	pt.innerText = "00:00:00/00:00:00";	
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
.rp {
	width: 100%;
	height: 100%;
	display: none;
	text-align: center;
	position: fixed;
	top: 0;
	background: rgba(0,0,0,0.8);
	z-index: 9999;
	overflow: hidden;
}
.aname {
	font-size: 16px;
}
.ainf {
	font-size: 12px;
}
.rtime {
	font-size: 22px;
	color: #FF0000;
}
.ptime {
	margin-top: 40%;
	font-size: 22px;
	color: #FFFFFF;
}
.rprogress {
	background: url(../img/arecord.png) no-repeat center center;
	background-size: 32px 32px;
}
.rschedule {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.progress {
  width: 90%;
  background-color: #666;
  margin: 0 5%;
  border: 1px solid #222;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.schedule {
  width: 8px;
  height: 8px;
  margin: 1px 0;
  background-color: #FFCC33;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}
.stop {
	width: 72px;
	height: 72px;
	background: url(../img/astop.png) center center;
	background-size: 72px 72px;
	margin: auto;
	-webkit-border-radius: 72px;
	border-radius: 72px;
}
.stop:active{
  	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
}
.iplay {
	display: block;
	background: no-repeat right center url();
	background-size: 50px 44px;
	-ms-touch-action: auto;
}
		</style>
	</head>
	<body>
		<header>
			<div class="nvbt iback" onclick="back(true);"></div>
			<div class="nvtt">Audio</div>
			<div class="nvbt idoc" onclick="openDoc('Audio Document','/doc/audio.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br/>
			<div class="button" onclick="startRecord()">开始录音</div>
			<div class="button" onclick="startPlay('_www/audio/friendship.mp3')">播放音乐</div>
			<br/>
			<!-- History list -->
			<ul id="history" class="dlist" style="text-align:left;">
				<li id="empty" class="ditem-empty">无历史记录</li>
			</ul>
			<br/>
			<div class="button button-waring" onclick="cleanHistory();">清空历史记录</div>
			<br/>
		</div>
		<div id="output">
Audio用于管理音频设备，可调用麦克风录制音频文件，也可播放音频文件。
		</div>
		<div id="play" class="rp">
			<div id="ptime" class="ptime">00:00:00/00:00:00</div><br/>
			<div id="progress" class="progress"><div id="schedule" class="schedule"></div></div>
			<br/>
			<div class="stop" onclick="stopPlay();outSet('停止播放！');"></div>
		</div>
		<div id="record" class="rp">
			<div style="width:100%;height:20%;"></div>
			<div class="rprogress"><div class="rschedule"></div></div>
			<br/>
			<div id="rtime" class="rtime">00:00:00</div><br/>
			<div class="stop" onclick="stopRecord();"></div>
		</div>
	</body>
</html>